import {Button, Form, Space} from "antd";
import {CustomFormItem, InputFormItem} from "./formItem";
import {memo} from "react";

interface FormListProps {
    name?: string;
    align?: string | any;
    leftLabel: string;
    leftName: string;
    leftRequired?: boolean;
    leftRules?: any[];
    rightLabel: string;
    rightName: string;
    rightRequired?: boolean;
    rightRules?: any[];
    children?: any;
    cusLabel?: any;
    cusName?: any;
    cusRequired?: boolean;
    cusRules?: any[];
    size?: any;
}

const FormList = ({
    name = "tags",
    align = "baseline",
    leftLabel,
    leftName,
    leftRequired = false,
    leftRules = [],
    rightLabel,
    rightName,
    rightRequired = false,
    rightRules = [],
    cusLabel,
    cusName,
    cusRequired = false,
    cusRules = [],
    size = [4, 16],
    children,
}: FormListProps) => (
    <Form.List name={name}>
        {(fields, {add, remove}) => (
            <div>
                {fields.map(({name}: any, index) => (
                    <Space size={size} key={index} align={align}>
                        <InputFormItem
                            label={leftLabel}
                            name={[name, leftName]}
                            required={leftRequired}
                            disabled={false}
                            rules={leftRules}
                        />
                        <InputFormItem
                            label={rightLabel}
                            name={[name, rightName]}
                            required={rightRequired}
                            rules={rightRules}
                            disabled={false}
                            type="number"
                        />
                        {children && (
                            <CustomFormItem
                                label={cusLabel}
                                name={[name, cusName]}
                                required={cusRequired}
                                rules={cusRules}
                            >
                                {children}
                            </CustomFormItem>
                        )}
                        <Button danger size="small" style={{marginLeft: 20}} onClick={() => remove(index)} block>
                            删除
                        </Button>
                    </Space>
                ))}
                <CustomFormItem>
                    <Button style={{width: 210}} type="primary" onClick={() => add()} block>
                        添加
                    </Button>
                </CustomFormItem>
            </div>
        )}
    </Form.List>
);

export default memo(FormList);
